<template>
    <div class="collect-box">
        <van-nav-bar title="意见反馈" left-arrow @click-left="onClickLeft" />
        <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o" scrollable="true">
            感谢您的指点，我们将认真对待您提出的宝贵意见~
        </van-notice-bar>
        <!--问题文字描述-->
        <van-field v-model="suggestContent" rows="2" label="问题描述" icon-prefix="iconfont" left-icon="edit" type="textarea"
            label-align="top" autosize maxlength="100" placeholder="请填写你的功能建议，感谢你的支持~(必填)" show-word-limit />
        <div class="upload-box">
            <div class="upload-label iconfont iconfont-picture">上传图片（单张小于10MB）</div>
            <van-uploader v-model="fileList" multiple :after-read="afterFileRead" />
        </div>
        <van-field v-model="contactContent" label-align="top" icon-prefix="iconfont" left-icon="mail" label="联系方式（可以为空）"
            rows="1" placeholder="格式为样例，邮箱：28623746@qq.com" />
        <div class="submit-btn">
            <van-button type="primary" native-type="button" @click="submitSuggest()">提交</van-button>
        </div>
    </div>
</template>
<script setup>
import { showToast } from "vant";
import { ref } from "vue";
import { useRouter } from "vue-router";
import _service from "../request/axios";
const router = useRouter();
let fileList = ref(new Array());
let suggestContent = ref("");
let contactContent = ref("");
let resultList = ref(new Array());
function onClickLeft() {
    router.back();
}
function submitSuggest() {
    if (!suggestContent.value) {
        showToast("意见描述不能为空~");
        return;
    } else {
        const suggestItem = {
            content: suggestContent.value,
            img_list: JSON.stringify(resultList.value),
            contact: contactContent.value
        }
        _service.post("/suggest/upload", suggestItem).then((res) => {
            showToast(res.msg);
        });
    }
    resultList.value = new Array();
    suggestContent.value = "";
    contactContent.value = "";
    fileList.value = new Array();
}
function afterFileRead(res) {
    if (res.file.size > 1024 * 1024 * 10) {
        showToast("所上传的文件过大~");
        fileList.value.pop();
        return;
    }
    let formData = new FormData();
    const httpOption = {
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    };
    formData.append("name", res.file.name);
    formData.append("data", res.content);
    formData.append("type", res.file.type);
    formData.append("size", res.file.size);
    _service.post("/file/upload", formData, httpOption).then((res) => {
        if (!res.code) {
            showToast("图片上传成功~");
            resultList.value.push(res.data);//记录文件路径
        }
    });
}
</script>
<style scoped lang="less">
::v-deep(.van-field__control) {
    max-width: 300px;
    width: 370px;
}

.collect-box .van-field__value {
    display: block;
}

.upload-label {
    text-align: left;
    line-height: 30px;
    height: 30px;
    font-size: 14px;
}

.upload-box {
    padding: 10px 0px 10px 12px;
}

.upload-box .van-uploader {
    float: left;
}

.collect-box .van-field__body {
    border: 1px #d5d7d7dd solid;
    border-radius: 10px;
    padding: 5px;
}

.submit-btn {
    margin-top: 15px;
}

.iconfont-picture {
    display: flex;
    align-items: center;
    font-weight: bold;
}
</style>